<template>
  <div class="main-content">
    <div class="head-content">
      <div>
        <span>出发地：</span>
        <el-cascader :options="options"
                     placeholder="请选择出发地"
                     :show-all-levels="false"
                     clearable
                     filterable
                     :props="{ expandTrigger: 'hover' }"
                     v-model="chufrom"></el-cascader>
      </div>

      <div>
        <span>目的地：</span>
        <el-cascader :options="options"
                     placeholder="请选择目的地"
                     :show-all-levels="false"
                     clearable
                     filterable
                     :props="{ expandTrigger: 'hover' }"
                     v-model="muto"></el-cascader>
      </div>

      <div>
        <span>出发时间：</span>
        <el-date-picker v-model="fromtime"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="MM-dd"
                        placeholder="选择出发日期">
        </el-date-picker>
      </div>

      <el-button type="primary"
                 plain
                 @click="shuchu">点击搜索</el-button>

    </div>
    <div class="foot-content">
      <Table :tableData="tableFrom"
             :allData="tableitem" />
    </div>
  </div>

</template>

<script>
import Table from './Table.vue'
export default {
  components: {
    Table
  },
  methods: {
    shuchu: function () {
      // 过滤1.先过滤出发地2.过滤目的地3.过滤出发日期
      // console.log(this.chufrom)
      // console.log(this.muto)
      let cityfrom;
      let cityto;

      // let timefrom;
      cityfrom = this.chufrom.pop();
      cityto = this.muto.pop();
      // console.log(cityfrom)
      // console.log(cityto)
      this.tableFrom = this.tableitem.filter(function (item) {
        return cityfrom == item.fromcity
      })
      this.tableFrom = this.tableFrom.filter(function (item) {
        return cityto == item.tocity
      })
      // this.tableFrom = this.tableFrom.filter(function (item) {
      //   return this.fromtime == item.begintime
      // })
    }
  },
  created () {
    let guodu;//eslint-disable-line no-unused-vars
    guodu = localStorage.getItem('tableData');
    this.tableitem = window.JSON.parse(guodu);
  },
  data () {
    return {
      fromtime: '',
      chufrom: '',
      muto: '',
      tableFrom: '',
      options: [{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '河南',
        label: '河南',
        children: [{
          value: '周口',
          label: '周口',
          children: [{
            value: '周口',
            label: '周口'
          }, {
            value: '沈丘',
            label: '沈丘'
          }, {
            value: '项城',
            label: '项城'
          }, {
            value: '淮阳',
            label: '淮阳'
          }, {
            value: '郸城',
            label: '郸城'
          }]
        }, {
          value: '郑州',
          label: '郑州',
          children: [{
            value: '郑州',
            label: '郑州'
          }, {
            value: '新郑',
            label: '新郑'
          }, {
            value: '中牟',
            label: '中牟'
          }, {
            value: '新密',
            label: '新密'
          }]
        }, {
          value: '洛阳',
          label: '洛阳',
          children: [{
            value: '新安',
            label: '新安'
          }, {
            value: '宜阳',
            label: '益阳'
          }, {
            value: '伊川',
            label: '伊川'
          }, {
            value: '孟津',
            label: '孟津'
          }]
        }]
      }, {
        value: '湖北',
        label: '湖北',
        children: [{
          value: '武汉',
          label: '武汉'
        }, {
          value: '黄冈',
          label: '黄冈'
        }, {
          value: '孝感',
          label: '孝感'
        }, {
          value: '襄阳',
          label: '襄阳'
        }]
      }],
      tableitem: '',
      // tableitem: [{
      //   date: '9月1号',
      //   number: '1',
      //   fromcity: '沈丘',
      //   departure: '沈丘南',
      //   destination: '洪山区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 50,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月2号',
      //   number: '2',
      //   fromcity: '周口',
      //   departure: '周口南',
      //   destination: '新郑',
      //   tocity: '郑州',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '3',
      //   fromcity: '周口',
      //   departure: '周口南',
      //   destination: '武汉',
      //   tocity: '洪山区',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '4',
      //   fromcity: '周口',
      //   departure: '周口南',
      //   destination: '武昌区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '5',
      //   fromcity: '周口',
      //   departure: '周口北',
      //   destination: '洪山区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '6',
      //   fromcity: '沈丘',
      //   departure: '沈丘北',
      //   destination: '洪山区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '7',
      //   fromcity: '沈丘',
      //   departure: '沈丘南',
      //   destination: '新郑',
      //   tocity: '郑州',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '8',
      //   fromcity: '沈丘',
      //   departure: '沈丘南',
      //   destination: '武昌区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   date: '9月3号',
      //   number: '9',
      //   fromcity: '沈丘',
      //   departure: '沈丘西',
      //   destination: '洪山区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // },]
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .head-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .el-button {
      margin: 20px;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        margin: 20px;
      }
    }
  }
  .foot-content {
    width: 100%;
  }
}
</style>